<script setup lang="ts">
import * as echarts from 'echarts'
import EchartsCard from '@/components/echarts/index.vue'
let echartData = [
  {
    value: 44,
    name: '市本级',
  },
  {
    value: 43,
    name: '广陵区',
  },
  {
    value: 41,
    name: '邗江区',
  },
  {
    value: 40,
    name: '开发区',
  },
  {
    value: 38,
    name: '江都区',
  },
  {
    value: 33,
    name: '瘦西湖景区',
  },
  {
    value: 32,
    name: '生态科技新城',
  },
  {
    value: 31,
    name: '宝应县',
  },
  {
    value: 22,
    name: '高邮市',
  },
  {
    value: 10,
    name: '仪征市',
  },
]
let attackSourcesColor = [
  new echarts.graphic.LinearGradient(0, 1, 1, 1, [
    { offset: 0, color: 'rgba(254, 69, 97, 0)' },
    { offset: 1, color: 'rgba(254, 69, 97, 1)' },
  ]),
  new echarts.graphic.LinearGradient(0, 1, 1, 1, [
    { offset: 0, color: 'rgba(254, 69, 97, 0)' },
    { offset: 1, color: 'rgba(255, 155, 0, 1)' },
  ]),
  new echarts.graphic.LinearGradient(0, 1, 1, 1, [
    { offset: 0, color: 'rgba(254, 69, 97, 0)' },
    { offset: 1, color: 'rgba(233, 217, 0, 1)' },
  ]),
  new echarts.graphic.LinearGradient(0, 1, 1, 1, [
    { offset: 0, color: 'rgba(0, 245, 255, 0)' },
    { offset: 1, color: 'rgba(0, 245, 255, 1)' },
  ]),
]
const option = {
  backgroundColor: {
    image:
      'https://img.isqqw.com/profile/upload/2025/03/22/ebbc94a4-ae7a-4249-a955-42845c8d06fe.png',
  },
  //你的代码
  tooltip: {
    trigger: 'axis',
    formatter(params) {
      for (var i = 0; i < params.length; i++) {
        return params[i].name + ':' + params[i].data.value + '宗'
      }
    },
  },
  grid: {
    containLabel: true,
    bottom: '10%',
    left: '-5%',
    top: '10%',
    right: '10%',
  },
  xAxis: {
    type: 'value',
    axisLabel: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    splitLine: {
      show: false,
    },
  },
  yAxis: [
    {
      type: 'category',
      data: echartData.map((item) => item.name),
      inverse: true,
      position: 'left',
      axisLabel: {
        fontSize: '18px',
        padding: [-3, 0, 0, 0],
        margin: 18, //刻度标签与轴线之间的距离
        formatter: function (value, index) {
          if (index < 3) {
            return `{img${index}|}`
          } else {
            return `{b|${index + 1}}`
          }
        },
        rich: {
          b: {
            color: '#fff',
            backgroundColor: 'rgba(0, 165, 232, 0.20)',
            borderWidth: 2,
            width: 23,
            height: 23,
            align: 'center',
            borderRadius: 23,
            fontSize: 12,
          },
          img0: {
            width: 24,
            height: 28,
            backgroundColor: {
              image:
                'https://img.isqqw.com/profile/upload/2025/03/22/82b42253-fc4c-437e-8c5f-34c3d46512e7.png',
              repeat: 'no-repeat',
            },
          },
          img1: {
            width: 24,
            height: 28,
            backgroundColor: {
              image:
                'https://img.isqqw.com/profile/upload/2025/03/22/debe0692-3f4b-41d8-8b8c-6c8fe6c1f5d0.png',
              repeat: 'no-repeat',
            },
          },
          img2: {
            width: 24,
            height: 28,
            backgroundColor: {
              image:
                'https://img.isqqw.com/profile/upload/2025/03/22/33c7a8ec-93a1-433f-a954-a61a44370979.png',
              repeat: 'no-repeat',
            },
          },
        },
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    {
      type: 'category',
      data: echartData.map((item) => item.value),
      inverse: true,
      position: 'right',
      axisLabel: {
        padding: [-3, 0, 0, 0],
        margin: 10, //刻度标签与轴线之间的距离
        formatter: function (value, index) {
          return `{a|${echartData[index].value}}{b|宗}`
        },
        rich: {
          a: {
            fontSize: 15,
            color: '#fff',
            padding: [4, 5, 0, 0],
          },
          b: {
            padding: [4, 0, 0, 0],
          },
        },
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    {
      type: 'category',
      inverse: true,
      position: 'left',
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      data: echartData.map((item) => item.name),
      axisLabel: {
        show: true,
        margin: -2,
        fontSize: 12,
        align: 'top',
        verticalAlign: 'bottom',
        padding: [0, 0, 10, 0],
        color: '#fff',
      },
    },
  ],
  series: [
    {
      data: echartData.map((item, i) => {
        let itemStyle = {
          color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i],
        }
        return {
          value: item.value,
          itemStyle: itemStyle,
        }
      }),
      type: 'bar',
      barWidth: 6,
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(32, 104, 118, 1)',
        borderRadius: 30,
      },
      label: {
        show: true,
        position: 'insideRight',
        distance: -10,
        formatter: (params) => {
          if (params.dataIndex < 3) {
            return `{img${params.dataIndex}|}`
          } else {
            return `{b|}`
          }
        },
        rich: {
          b: {
            widht: 18,
            height: 18,
            backgroundColor: {
              image:
                'https://img.isqqw.com/profile/upload/2025/03/22/11104437-0ac3-48b6-8332-fa8d2864e81a.png',
              repeat: 'no-repeat',
            },
          },
          img0: {
            width: 18,
            height: 18,
            backgroundColor: {
              image:
                'https://img.isqqw.com/profile/upload/2025/03/22/981cded1-d267-446b-b018-0301fcd02d5e.png',
              repeat: 'no-repeat',
            },
          },
          img1: {
            width: 18,
            height: 18,
            backgroundColor: {
              image:
                'https://img.isqqw.com/profile/upload/2025/03/22/88b67913-0d40-4421-b762-a1433a17f328.png',
              repeat: 'no-repeat',
            },
          },
          img2: {
            width: 18,
            height: 18,
            backgroundColor: {
              image:
                'https://img.isqqw.com/profile/upload/2025/03/22/f5fc74a6-8f84-4da7-a4ee-93bf3880f419.png',
              repeat: 'no-repeat',
            },
          },
        },
      },
    },
  ],
}
</script>

<template>
  <echarts-card :options="option" h="500px" />
</template>

<style scoped lang="scss"></style>
